<template>
  <demo-content :title="title">
    <table>
      <caption>
        CanvasRenderingCont ext2D对象中与线段绘制有关的属性
      </caption>
      <thead>
        <tr>
          <th>属性</th>
          <th>描述</th>
          <th>类型</th>
          <th>取值范围</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>lineWidth</td>
          <td>以像素为单位的线段宽度</td>
          <td>类型</td>
          <td>非零的正数</td>
          <td>1.0</td>
        </tr>
        <tr>
          <td>lineCap</td>
          <td>该值决定浏览器如何绘制线段的端点</td>
          <td>DOMString</td>
          <td>butt, round, square</td>
          <td>butt</td>
        </tr>
        <tr>
          <td>lineJoin</td>
          <td>该值决定浏览器如何绘制线段的连接点</td>
          <td>DOMString</td>
          <td>round, bevel, miter</td>
          <td>bevel</td>
        </tr>
        <tr>
          <td>miterLimit</td>
          <td>
            斜接线长度与二分之一线宽的比值。如果斜接线的长度超过了该值，<br />
            浏览器就会 以bevel 方式来绘制线段的连接点
          </td>
          <td>double</td>
          <td>非零的正数</td>
          <td>10.0</td>
        </tr>
      </tbody>
    </table>
    <p>
      绘制矩形时(或者其他任何存在多条线连接的图形)，lineJoin
      指定了连接点的样式，分别如下所示。默认样式为 <code>miter</code>。
    </p>
    <div>
      lineJoin 的取值如下：
      <ul>
        <li>
          bevel:
          在线段相交的时候，将会用一条直线来连接两个拐角外部的点，使之构成一个三角形。
        </li>
        <li>miter(默认): 延伸线段外边，使两个线段的接合处形成一个角。</li>
        <li>round: 两个线段的拐角处就会画上一段填充好的圆弧。</li>
      </ul>
      <img src="./images/lineJoin.png" alt="" />
      <br />
      如果两个线段的夹角很小的话，那么斜接线的长度有可能
      会变得非常长。如果斜接线的长度太长，其比值(也就是斜接线长度除以
      二分之一的线宽)已经超过了你所指定的miterLimit
      属性的话，那么浏览器将会以bevel 样式来处理两个线段的接合处，如图 2-31 所示
      <br />
      <img src="./images/miterLimit.png" alt="" style="width: 400px" />
      <br />
    </div>
    <p>
      可以通过 lineJoin 属性来绘制圆角矩形，Canvas
      规范描述了绘制这些圆角的详细流程，没有留下什么自由发挥的余地。如果想要控制诸如圆角半径之类的一些属性，则必须自己来绘制这些圆角才行。
    </p>
    <canvas height="200" ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { rect, text } from "./utils";

const title = "线的连接处样式";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  text.draw(ctx, { x: 17, y: 20, fontSize: 20, text: "miter" });
  rect.draw(ctx, {
    x: 20,
    y: 35,
    w: 50,
    h: 50,
    lineWidth: 15,
    lineJoin: "miter",
  });

  text.draw(ctx, { x: 17, y: 120, fontSize: 20, text: "miter limit" });
  rect.draw(ctx, {
    x: 20,
    y: 130,
    w: 50,
    h: 50,
    lineWidth: 15,
    lineJoin: "miter",
    miterLimit: 1,
  });

  text.draw(ctx, { x: 100, y: 20, fontSize: 20, text: "bevel" });
  rect.draw(ctx, {
    x: 100,
    y: 35,
    w: 50,
    h: 50,
    lineWidth: 15,
    lineJoin: "bevel",
  });
  text.draw(ctx, { x: 180, y: 20, fontSize: 20, text: "round" });
  rect.draw(ctx, {
    x: 180,
    y: 35,
    w: 50,
    h: 50,
    lineWidth: 15,
    lineJoin: "round",
  });
});
</script>

<style src="./default.css" scoped></style>
<style>
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
